<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas五子棋</title>
    <style>
        body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0e6d2; }
        canvas { border: 2px solid #8B4513; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); }
        .game-info { margin-top: 20px; text-align: center; font-size: 18px; font-weight: bold; }
    </style>
</head>
<body>
    <div>
        <canvas id="board" width="600" height="600"></canvas>
        <div class="game-info" id="gameInfo">当前玩家：黑棋</div>
        <button id="restartBtn">重新开始</button>
    </div>

    <script>
        const canvas = document.getElementById('board');
        const ctx = canvas.getContext('2d');
        const gameInfo = document.getElementById('gameInfo');
        const restartBtn = document.getElementById('restartBtn');
        
        // 棋盘配置
        const BOARD_SIZE = 15;        // 棋盘大小 15×15
        const CELL_SIZE = canvas.width / (BOARD_SIZE + 1);  // 单元格大小
        const PIECE_RADIUS = CELL_SIZE / 2 - 2;  // 棋子半径
        
        // 游戏状态
        let gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));  // 0:空, 1:黑棋, 2:白棋
        let currentPlayer = 1;  // 1:黑棋(先手), 2:白棋
        let gameOver = false;   // 游戏是否结束
        
        // 初始化游戏
        function initGame() {
            gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
            currentPlayer = 1;
            gameOver = false;
            drawBoard();
            gameInfo.textContent = "当前玩家：黑棋";
        }
        
        // 绘制棋盘
        function drawBoard() {
            // 绘制背景
            ctx.fillStyle = "#E6C38E";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制网格线
            ctx.strokeStyle = "#000";
            ctx.lineWidth = 1;
            
            for (let i = 0; i < BOARD_SIZE; i++) {
                // 横线
                ctx.beginPath();
                ctx.moveTo(CELL_SIZE, CELL_SIZE * (i + 1));
                ctx.lineTo(CELL_SIZE * BOARD_SIZE, CELL_SIZE * (i + 1));
                ctx.stroke();
                
                // 竖线
                ctx.beginPath();
                ctx.moveTo(CELL_SIZE * (i + 1), CELL_SIZE);
                ctx.lineTo(CELL_SIZE * (i + 1), CELL_SIZE * BOARD_SIZE);
                ctx.stroke();
            }
            
            // 绘制五个星位点
            const starPoints = [
                {x: 3, y: 3}, {x: 3, y: 11}, {x: 7, y: 7}, {x: 11, y: 3}, {x: 11, y: 11}
            ];
            
            starPoints.forEach(point => {
                ctx.beginPath();
                ctx.arc(CELL_SIZE * (point.x + 1), CELL_SIZE * (point.y + 1), 5, 0, Math.PI * 2);
                ctx.fillStyle = "#000";
                ctx.fill();
            });
            
            // 绘制已落棋子
            for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    if (gameBoard[i][j] !== 0) {
                        drawPiece(i, j, gameBoard[i][j]);
                    }
                }
            }
        }
        
        // 绘制棋子
        function drawPiece(row, col, player) {
            const x = CELL_SIZE * (col + 1);
            const y = CELL_SIZE * (row + 1);
            
            // 绘制棋子
            ctx.beginPath();
            ctx.arc(x, y, PIECE_RADIUS, 0, Math.PI * 2);
            
            // 设置渐变
            const gradient = ctx.createRadialGradient(
                x - PIECE_RADIUS / 3, y - PIECE_RADIUS / 3, PIECE_RADIUS / 10,
                x, y, PIECE_RADIUS
            );
            
            if (player === 1) {  // 黑棋
                gradient.addColorStop(0, "#555");
                gradient.addColorStop(1, "#000");
            } else {  // 白棋
                gradient.addColorStop(0, "#fff");
                gradient.addColorStop(1, "#ddd");
            }
            
            ctx.fillStyle = gradient;
            ctx.fill();
            
            // 添加边框
            ctx.strokeStyle = player === 1 ? "#333" : "#eee";
            ctx.lineWidth = 1;
            ctx.stroke();
        }
        
        // 检查是否有玩家获胜
        function checkWin(row, col, player) {
            const directions = [
                [0, 1],   // 水平
                [1, 0],   // 垂直
                [1, 1],   // 对角线
                [1, -1]   // 反对角线
            ];
            
            for (const [dx, dy] of directions) {
                let count = 1;  // 当前位置已经有一个棋子
                
                // 正方向检查
                for (let i = 1; i < 5; i++) {
                    const newRow = row + i * dx;
                    const newCol = col + i * dy;
                    
                    if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) break;
                    if (gameBoard[newRow][newCol] !== player) break;
                    
                    count++;
                }
                
                // 反方向检查
                for (let i = 1; i < 5; i++) {
                    const newRow = row - i * dx;
                    const newCol = col - i * dy;
                    
                    if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) break;
                    if (gameBoard[newRow][newCol] !== player) break;
                    
                    count++;
                }
                
                if (count >= 5) return true;
            }
            
            return false;
        }
        
        // 检查棋盘是否已满
        function isBoardFull() {
            for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    if (gameBoard[i][j] === 0) return false;
                }
            }
            return true;
        }
        
        // 处理鼠标点击
        canvas.addEventListener('click', (e) => {
            if (gameOver) return;
            
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;
            
            // 计算点击的格子
            const col = Math.round((mouseX - CELL_SIZE) / CELL_SIZE);
            const row = Math.round((mouseY - CELL_SIZE) / CELL_SIZE);
            
            // 检查是否在有效范围内且为空
            if (row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE && gameBoard[row][col] === 0) {
                // 落子
                gameBoard[row][col] = currentPlayer;
                drawBoard();
                
                // 检查胜负
                if (checkWin(row, col, currentPlayer)) {
                    gameOver = true;
                    gameInfo.textContent = `${currentPlayer === 1 ? '黑棋' : '白棋'}获胜！`;
                    return;
                }
                
                // 检查平局
                if (isBoardFull()) {
                    gameOver = true;
                    gameInfo.textContent = "平局！";
                    return;
                }
                
                // 切换玩家
                currentPlayer = currentPlayer === 1 ? 2 : 1;
                gameInfo.textContent = `当前玩家：${currentPlayer === 1 ? '黑棋' : '白棋'}`;
            }
        });
        
        // 重新开始按钮
        restartBtn.addEventListener('click', initGame);
        
        // 初始化游戏
        initGame();
    </script>
</body>
</html>
